import React from "react"

import { Form, Input, Button, Space } from "antd"
import { MinusCircleOutlined, PlusOutlined } from "@ant-design/icons"

const FormPlus = ({ url = "", columns = [] }) => {
  const onFinish = (values) => {
    console.log("Received values of form:", values)
  }

  return (
    <Form name='dynamic_form_nest_item' onFinish={onFinish} autoComplete='off'>
      <Form.List name='tableList'>
        {(fields, { add, remove }) => (
          <>
            {fields.map((field) => (
              <Space
                key={field.key}
                style={{ display: "flex", marginBottom: 8 }}
                align='baseline'
              >
                {columns.map((column) => (
                  <Form.Item
                    {...field}
                    name={[field.name, column]}
                    fieldKey={[field.fieldKey, column]}
                    rules={[{ required: true, message: "Missing " + column }]}
                  >
                    <Input placeholder={"Input" + column + "data"} />
                  </Form.Item>
                ))}
                <MinusCircleOutlined
                  onClick={() => remove(field.name)}
                  style={{ color: "red" }}
                />
              </Space>
            ))}
            <Form.Item>
              <Button
                onClick={() => add()}
                block
                icon={<PlusOutlined />}
                type='primary'
              >
                Add field
              </Button>
            </Form.Item>
          </>
        )}
      </Form.List>
      <Form.Item>
        <Button type='primary' htmlType='submit'>
          Submit
        </Button>
      </Form.Item>
    </Form>
  )
}

export default FormPlus
